<h1>作品搜索</h1>
<form id="search-form">
    <input type="text" id="search-term" name="search_term" placeholder="输入搜索内容" required>
    <input type="text" id="filter-term" name="filter_term" placeholder="过滤条件 (可选)">
    <label for="selection">选择:</label>
    <select name="selection" id="selection">
        <option value="scratch">scratch</option>
        <option value="book">book</option>
        <option value="snly">snly</option>
    </select>
    <button type="submit">搜索</button>
</form>


<h2>搜索结果</h2>
<p id="search-time"></p>
<ul id="results-list"></ul>

<script>
document.getElementById('search-form').addEventListener('submit', function(event) {
    event.preventDefault();
    
    let searchTerm = document.getElementById('search-term').value;
    let filterTerm = document.getElementById('filter-term').value;
    let selection = document.getElementById('selection').value;
    
    fetch('/api/search', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            search_term: searchTerm,
            filter_term: filterTerm,
            selection: selection
        })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('search-time').textContent = `搜索时间: ${data.elapsed_time}ms`;
        
        const resultsList = document.getElementById('results-list');
        resultsList.innerHTML = '';  // 清空之前的结果

        if (data.results.length > 0) {
            data.results.forEach(row => {
                const listItem = document.createElement('li');
                listItem.innerHTML = `<a href="${selection}/${row.id}"><strong>作品:</strong> ${row.content}<br><strong>ID:</strong> ${row.id}</a>`;
                resultsList.appendChild(listItem);
            });
        } else {
            resultsList.innerHTML = '<p>没有找到匹配的作品。</p>';
        }
    })
    .catch(error => console.error('Error:', error));
});
</script>
